<script setup>
import {computed,ref} from 'vue'
import { onShow } from "@dcloudio/uni-app"
import TabBar from '../../components/tab-bar.vue'
// 手机状态栏的高度
const { statusBarHeight } = uni.getSystemInfoSync()

const getData = async() => {
	const {data} =await getUserInfo()
	// console.log(data.data);
}
const token = ref(uni.getStorageSync('token'))
const mid = ref(uni.getStorageSync('mid'))
const responseData = ref({})
const shenhe_price = ref(0)
const tixian_price = ref(0)
// 隐藏原生的tab-bar
onShow(() => {
  uni.hideTabBar()
  // console.log(token.value,'tooken');
  uni.request({
  	url: 'https://tp6.recer.starsky.fun/api/Home/Member/index', 
	data:{
		'token':token.value,
		'mid':uni.getStorageSync('mid'),
		'data':'4'
	},
  	method:'POST',
  	header:{
		'content-type':'application/x-www-form-urlencoded; charset=UTF-8',
	},
	withCredentials:true,
    success: (res) => {
  		responseData.value = res.data.data
		shenhe_price.value = res.data.data.shenhe_money
		tixian_price.value = res.data.data.tixian_count
		// console.log('res',responseData.value);
  	}
  })
})

// 任务分类
const taskList = [
  { url: 'http://recommender.starsky.fun/tpl/Public/xsm/img/order_checking.png', text: '审核中' },
  { url: 'http://recommender.starsky.fun/tpl/Public/xsm/img/order_pass.png', text: '已通过' },
  { url: 'http://recommender.starsky.fun/tpl/Public/xsm/img/order_reject.png', text: '未通过' },
  { url: 'http://recommender.starsky.fun/tpl/Public/xsm/img/order_unsubmit.png', text: '已完成' }
]

const boardList = [
  { url: 'http://recommender.starsky.fun/tpl/Public/xsm/img/user_task.png', text: '发布管理' },
  { url: 'http://recommender.starsky.fun/tpl/Public/xsm/img/user_share.png', text: '我的团队' },
  { url: 'http://recommender.starsky.fun/tpl/Public/xsm/img/user_help.png', text: '帮助中心' },
  { url: 'http://recommender.starsky.fun/tpl/Public/xsm/img/user_setting.png', text: '个人设置' },
  { url: 'http://recommender.starsky.fun/tpl/Public/xsm/img/user_setting.png', text: '退出登录' }
]

function clickHandle(index) {
  if (index === 4) {
    uni.removeStorageSync('token')
    uni.switchTab({ url: '/pages/home/home' })
  }else if(index === 0){
	uni.navigateTo({
		url:'/pages/me/personalCenter/publish'
	})
  }else if(index === 1){
	uni.navigateTo({
		url:'/pages/me/personalCenter/team'
	})
  }else if(index === 2){
	uni.navigateTo({
		url:'/pages/me/personalCenter/assistance'
	})
  }else if(index === 3){
	uni.navigateTo({
		url:'/pages/me/personalCenter/PMsg'
	})
  }
}
const goPersonal = () =>{
	uni.navigateTo({
		url:'/pages/me/personalCenter/PMsg'
	})
}
const goWithdrawals = () =>{
	uni.navigateTo({
		url:'/pages/me/personalCenter/withdrawals'
	})
}
const goRecharge = () =>{
	uni.navigateTo({
		url:'/pages/me/personalCenter/recharge'
	})
}
const goMission = (index) =>{
	uni.navigateTo({
		url:`/pages/me/personalCenter/mission?key=${index}`
	})
}
</script>

<template>
  <view class="me-content">
    <view class="statusBarHeight"  :style="{ height: statusBarHeight * 2 + 'rpx' }"></view>
    <view class="top">
      <view class="inner">
        <image
          src="http://recommender.starsky.fun/Upload/SystemConfig/5f14e8337d511.png"
          class="avatar"
          mode="scaleToFill"
		  @click="goPersonal"
        />
        <view class="top-right">
          <view class="right-hd">
            <view class="left">{{responseData.nickname}}</view>
            <view class="right">ID : {{responseData.mid}}</view>
          </view>
          <view class="right-bd">
            <text>【{{responseData.level_name}}】</text>
            <text>({{responseData.city}})</text>
          </view>
        </view>
      </view>
    </view>
    <view class="wallet">
      <view class="inner">
        <view>用户余额 ( 元 ) </view>
        <view>{{responseData.price}}</view>
        <view>
          <view class="top-up" @click="goRecharge">充值</view>
          <view class="withdraw-deposit" @click="goWithdrawals">提现</view>
        </view>
      </view>
    </view>
    <view class="money">
      <text>审核中的金额 : {{shenhe_price}}</text>
      <text>提现中的金额 : {{tixian_price}}</text>
    </view>
    <view class="task">
      <view class="task-title">
        <text>我的任务</text>
        <text>查看全部任务</text>
      </view>
      <view class="task-list">
        <block v-for="item,index in taskList" :key="item.url">
          <view class="item" @click="goMission(index)">
            <image
              :src="item.url"
              class="item-icon"
              mode="scaleToFill"
            />
            <text>{{ item.text }}</text>
          </view>
        </block>
      </view>
    </view>
    <view class="section">
      <block v-for="(item, index) in boardList" :key="item.url">
        <view class="item" @click="clickHandle(index)">
          <view class="left">
            <image
              :src="item.url"
              class="item-img"
              mode="scaleToFill"
            />
            <view class="text">{{ item.text }}</view>
          </view>
          <image
            src="http://recommender.starsky.fun/tpl/Public/xsm/img/arrow_right_grey.png"
            class="right-img"
            mode="scaleToFill"
          />
        </view>
      </block>
    </view>
    <tab-bar />
  </view>
</template>

<style lang="scss" scoped>
.me-content {
  height: calc(100vh - 104rpx);
  overflow: auto;
  background-color: #f0f0f0;

  .statusBarHeight {
    background-color: #fff;
  }

  .top {
    padding:  0 20rpx;
    height: 160rpx;
    background-color: #fff;

    .inner {
      display: flex;
      align-items: center;
      height: 100%;

      .avatar {
        width: 128rpx;
        height: 128rpx;
        border-radius: 64rpx;
      }

      .top-right {
        flex: 1;
        padding-left: 24rpx;
        font-size: 32rpx;

        .right-hd {
          display: flex;
          justify-content: space-between;
          align-items: center;
          font-size: 36rpx;
          font-weight: 600;

          .right {
            font-size: 30rpx;
            font-weight: 400;
            color: #a7a3a3;
          }
        }

        .right-bd {
          height: 48rpx;
          font-size: 32rpx;
          color: #a7a3a3;

          text {
            height: 40rpx;
          }
        }
      }
    }
  }

  .wallet {
    height: 256rpx;
    padding: 0 20rpx;
    background-color: #fff;

    .inner {
      display: flex;
      flex-direction: column;
      justify-content: center;
      height: 100%;
      padding: 0 32rpx;
      background-color: #feb101;
      border-radius: 16rpx;
      color: #fff;

      view:nth-child(1) {
        font-size: 26rpx;
        height: 64rpx;
        line-height: 64rpx;
      }

      view:nth-child(2) {
        font-size: 48rpx;
        width: 160rpx;
        height: 80rpx;
        line-height: 80rpx;
        font-weight: 700;
      }

      view:nth-child(3) {
        display: flex;
        align-items: flex-end;
        font-size: 48rpx;
        height: 70rpx;

        view {
          width: 160rpx;
          height: 56rpx;
          border-radius: 28rpx;
          background-color: #fff;
          color: #fd6620;
          font-size: 28rpx;
          line-height: 56rpx;
          text-align: center;
        }

        .top-up {
          margin-right: 30rpx;
        }
      }
    }
  }

  .money {
    padding: 0 20rpx;
    height: 80rpx;
    background-color: #fff;
    line-height: 80rpx;

    text {
      font-size: 24rpx;
      color: #a7a7a7;
      margin-right: 32rpx;
    }
  }

  .task {
    margin-top: 16rpx;
    height: 240rpx;
    background-color: #fff;

    .task-title {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 0 20rpx;
      height: 80rpx;
      border-bottom: 1px #f0f0f0 solid;
      font-size: 30rpx;
      font-weight: 600;
      color: #040404;

      text:nth-child(2) {
        color: #ccc;
        font-size: 24rpx;
      }
    }

    .task-list {
      display: flex;

      .item {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        flex: 1;
        height: 160rpx;

        .item-icon {
          width: 80rpx;
          height: 80rpx;
        }

        text {
          height: 48rpx;
          line-height: 48rpx;
          font-size: 24rpx;
          color: #a1a1a1;
          margin-top: -6rpx;
        }
      }
    }
  }

  .section {
    margin-top: 16rpx;
    height: 480rpx;
    background-color: #fff;

    .item {
      display: flex;
      justify-content: space-between;
      align-items: center;
      height: 94rpx;
      padding: 0 20rpx;
      border-bottom: 2rpx #f0f0f0 solid;

      .left {
        display: flex;
        align-items: center;
        font-size: 30rpx;
        font-weight: 600;
        
        .item-img {
          width: 64rpx;
          height: 64rpx;
          margin-right: 8rpx;
        }
      }

      .right-img {
        width: 44rpx;
        height: 44rpx;
      }
    }
  }
}
</style>